<template>
<div class="container">
  <img :src=cover alt="cover">
  <div class="content">
    <h1>{{title}}</h1>
    <div>
      <div class="ui image blue label">
        <img :src="creator.avatar">
<!--        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bq233.com%2Fkanqq%2Fpic%2Fupload%2F2018%2F0723%2F1532329172809328.jpg&refer=http%3A%2F%2Fimg.bq233.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647317860&t=2c212aab3c4821bded2c3b2a6f4c090a" alt="">-->
        {{creator.username}}
      </div>
      <div class="ui label">
        <i class="calendar alternate outline icon"></i>
        {{createTime}}
      </div>
      <div class="ui label">
        <i class="clock outline icon"></i>
        {{updateTime}}
      </div>
    </div>
    <div class="content-article">
      <span v-html="content"></span>
      <el-divider content-position="center">END</el-divider>
    </div>
  </div>
</div>
</template>

<script>
import { getNewsById } from '@/api/news'

export default {
  name: 'NewInfo',
  data() {
    return {
      cover: '',
      title: '',
      content: '',
      creator: {
        avatar: '',
        username: ''
      },
      createTime: '',
      updateTime: ''
    }
  },
  mounted() {
    this.getNewsById()
  },
  methods: {
    getNewsById() {
      const param = {
        id: this.$route.params.id
      }
      getNewsById(param).then(response => {
        const { content } = response
        this.cover = content.cover
        this.title = content.title
        this.content = content.content
        this.creator.avatar = content.creator.avatar
        this.creator.username = content.creator.username
        this.createTime = content.createTime
        this.updateTime = content.updateTime
      })
    }
  }
}
</script>

<style scoped>
@import "~@/styles/semantic.css";
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.content {
  margin-top: 30px;
}
img {
  margin-top: 10px;
  width: 800px;
  height: 400px;
}
.label {
  margin-right: 20px;
}
.content-article {
  width: 800px;
  margin-top: 20px;
}
</style>
